
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Minimal and Clean Sign up / Login and Forgot Form by FreeHTML5.co</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta name="description" content="Free HTML5 Template by FreeHTML5.co" />
	<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
	<link rel="shortcut icon" href="favicon.ico" />
		<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css" />
	<link rel="stylesheet" href="../css/animate.css" />
	<link rel="stylesheet" href="../css/style.css" />

	</head>

	<body class="style-2">
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<!-- Start Sign In Form -->
				<form id="form-register" method="post" class="fh5co-form animate-box" data-animate-effect="fadeInLeft">
					<h2>注册</h2>
					<div class="row">
						<div class="alert alert-success" role="alert">请输入您的手机号及密码</div>
						<input type="text" value="2" name="type" hidden="hidden" />
					</div>
					<div class="row">
						<div class="col-md-12">
							<input type="text" class="form-control" id="identifier"  name="identifier" placeholder="手机" autocomplete="off" />
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-xs-6" style="border-right-style: inset">
							<input type="text" class="form-control"  id="verifycode"  name="verifycode" placeholder="验证码" autocomplete="off" />
						</div>
						<div class="col-md-6 col-xs-6">
							<button type="button" id="getVericode"class="btn btn-default btn-sm form-control" onclick="getVerify()" style="">获取验证码</button>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12"><input type="password" class="form-control" id="password"  name="password" placeholder="密码" autocomplete="off" /></div>
					</div>
					<div class="row">
						<div class="col-md-12"><input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" placeholder="确认密码" autocomplete="off" /></div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<br/>
							<div class="form-group"><p>已经注册? <a href="/signIn">登录</a></p></div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="form-group"><input id="btn-register" type="button" value="注册" class="btn btn-primary" /></div>
						</div>
					</div>
				</form>
				<!-- END Sign In Form -->
			</div>
		</div>
		<div class="row" style="padding-top: 60px; clear: both;">
			<div class="col-md-12 text-center"><p><small>&copy; All Rights Reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title=""></a> - Collect from <a href="http://www.cssmoban.com/" title="" target="_blank"></a></small></p></div>
		</div>
	</div>
	</body>
	<script src="../jquery/jquery-3.3.1.min.js"></script>
	<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	<script src="../js/jquery.placeholder.min.js"></script>
	<script src="../js/jquery.waypoints.min.js"></script>
	<script src="../js/main.js"></script>
	<script>
        var randomNumber;
        var phone ;
        $(document).ready(function() {
            $("#identifier").bind('input porpertychange',function () {
                phone = $("#identifier").val();
            });
        });

        function getVerify() {
            var num = 8999;
            var top = 9999;
            var bottom = 1000;
            num = parseInt(Math.random() * (top - bottom + 1) + bottom);
            randomNumber = num;
            $.post("http://111.231.223.47:8035/message", {verifyCode: num, phoneNumber: phone},function(data){
                alert(data);
            });
            var i=59;
            $("#getVericode").attr("disabled", true);
            var time=setInterval(function () {
                $("#getVericode").html(i+"s后重新获取");
                i--;
            },1000);
            setTimeout(function(){//两秒后跳转
                clearInterval(time);
                $("#getVericode").html("获取验证码");
                $("#getVericode").attr("disabled", false);
            },60000);
        }
        function check() {

            var verifycode = $("#verifycode").val();
            var phone = $("#identifier").val();
            if( verifycode == ""){
                alert("验证码为空");
                return false;
            }
            if(phone == ""){
                alert("手机号为空");
                return false;
            }
            if (verifycode == randomNumber) {
                //
                return true;
            } else {
                alert("验证码错误");
                return false;
            }
        }

        $("#btn-register").click(function () {
            if(check()){
                $.ajax({
                    type: 'post',
                    url:'register',
                    data:$('#form-register').serialize(),
                    success: function (data) {
                        if("注册成功"==data){
                            $(".alert").html(data+",2s后到登录页");
                            setTimeout(function () {
                                location.href="/signIn";
                            },2000);
                        }else{
                            $(".alert").html(data);
                        }
                    },
                    error: function () {
                    }
                });
			}
        });
	</script>
</html>

